<template>
    <div class="about">
        <h1>测试说明:</h1>
        <p>1. 文件上传控件测试</p>
        <hr>
        <h1>系统参数检查</h1>
        <p>本地浏览器的环境变量如下：</p>
        <ul>
            <li>NODE_ENV = {{ nodeEnv }}</li>
            <li>DEBUG = {{ debug }}</li>
            <li>BASE_URL = {{ baseUrl }}</li>
            <li>API_URL = {{ apiUrl }}</li>
        </ul>
        <p>本地浏览器已安装的语言列表：</p>
        <ul>
            <li>首选语言：navigator.language = {{ navigator.language }}</li>
            <li>语言顺序：navigator.languages = {{ navigator.languages }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld.vue',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            nodeEnv: null,
            debug: null,
            baseUrl: null,
            apiUrl: null,
            navigator: {
                language: null,
                languages: [],
            },
        }
    },
    created() {
        this.msg = '欢迎，这是你的 Hello World 页面...'
        this.nodeEnv = process.env.NODE_ENV
        this.debug = process.env.DEBUG
        this.baseUrl = process.env.BASE_URL
        this.apiUrl = process.env.API_URL
        this.navigator = navigator
    },
}
</script>

<style lang="stylus" scoped>
@import '~styles/global.styl'
@import '~styles/theme.styl'
.about
    width: 100%
    height: calc(100vh - 0px);
    overflow-y: auto
    color: $red
    background-attachment: fixed
    background-repeat: no-repeat
    background-position: center center
    background-size: cover
    h1
        color: red
        text-align: Left
    ul
        margin: 0
        padding: 30px
</style>